<template>
    <div class="left">
        <!-- 上部 -->
        <div class="left_header">
            <!--  -->
            <div class="title">最新上线模型</div>
            <div class="title_table">
                <el-table :data="topData" max-height="200" style="width: 100%" ref="table1">
                    <el-table-column prop="ranking" label="排名" width="50" align="center" header-align="center" />
                    <el-table-column prop="time" label="上线时间" align="center" header-align="center" />
                    <el-table-column prop="names" label="模型名称" align="center" header-align="center" />
                    <el-table-column prop="arithmetic" label="算法名称" align="center" header-align="center" />
                </el-table>
            </div>
        </div>
        <!-- 中间 -->
        <div class="left_middle">
            <!--  -->
            <div class="title">模型排名</div>
            <div class="title_table">
                <el-table :data="middleData" max-height="200" style="width: 100%" ref="table2">
                    <el-table-column prop="names" label="模型名称"> </el-table-column>
                    <el-table-column prop="userNum" label="目标用户" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column prop="coverage" label="覆盖率" align="center" header-align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 下边 -->
        <div class="left_bottom">
            <!--  -->
            <div class="title">意图识别算法</div>
            <div class="title_table">
                <el-table :data="bottomData" max-height="200" style="width: 100%" ref="table3">
                    <el-table-column prop="arithmetic" label="算法名称"></el-table-column>
                    <el-table-column prop="employ" label="应用" align="center" header-align="center"></el-table-column>
                    <el-table-column prop="ranking" label="应用排名" align="center" header-align="center"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
let topData = reactive([
    {
        ranking: "1",
        time: "2022-05-20",
        names: "智能家居",
        arithmetic: "GRU算法",
    },
    {
        ranking: "2",
        time: "2022-05-20",
        names: "智能门锁",
        arithmetic: "SEQ算法",
    },
    {
        ranking: "3",
        time: "2022-05-20",
        names: "全光组网",
        arithmetic: "深度学习算法",
    },
    {
        ranking: "4",
        time: "2022-05-20",
        names: "套餐低签",
        arithmetic: "FASTTEST算法1111111",
    },
    {
        ranking: "5",
        time: "2022-05-20",
        names: "天翼看家",
        arithmetic: "深度网络算法111111111",
    },
    {
        ranking: "6",
        time: "2022-05-20",
        names: "携号转出",
        arithmetic: "GRU算法",
    },
    {
        ranking: "7",
        time: "2022-05-20",
        names: "携号转出",
        arithmetic: "SEQ算法",
    },
    {
        ranking: "8",
        time: "2022-05-20",
        names: "移机搬家",
        arithmetic: "GRU算法",
    },
    {
        ranking: "9",
        time: "2022-05-20",
        names: "智能门禁",
        arithmetic: "深度网络算法",
    },
])
let middleData = reactive([
    { names: "移机搬家", userNum: "5953", coverage: "80%" },
    { names: "套餐低签", userNum: "2551", coverage: "79%" },
    { names: "携号转出", userNum: "2316", coverage: "75%" },
    { names: "智能门锁", userNum: "14", coverage: "70%" },
    { names: "智能门禁", userNum: "14", coverage: "70%" },
    { names: "天翼看家", userNum: "10", coverage: "66%" },
])
let bottomData = reactive([
    { arithmetic: "GRU算法", employ: "130", ranking: "1" },
    { arithmetic: "SEQ算法", employ: "115", ranking: "2" },
    { arithmetic: "FASTTEST算法", employ: "84", ranking: "3" },
    { arithmetic: "深度学习算法", employ: "48", ranking: "4" },
    { arithmetic: "深度网络算法", employ: "15", ranking: "5" },
])
let table = reactive({})
let table1 = ref(null);
let table2 = ref(null);
let table3 = ref(null);
const infinitScroll = (ref) => {
    // 拿到表格挂载后的真实DOM
    // console.log("ref===", ref);
    // console.log("ref===", table1.value);
    // console.log("ref===", table1.value.layout.table.refs);
    // const table = this.$refs[ref];
    const table = table1.value.layout.table.refs;
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper;
    // console.log("divData==", divData);
    divData.onmouseover = function () {
        clearInterval(t);
    }; //鼠标移入，停止滚动
    divData.onmouseout = function () {
        start();
    }; //鼠标移出，继续滚动

    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    let t;
    function start() {
        // console.log(2);
        // 数据少于表格高度停止滚动
        // if (divData.clientHeight >= divData.scrollHeight) {
        //   return;
        // }
        t = setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 1;
            // console.log(1);
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (
                divData.clientHeight + divData.scrollTop ==
                divData.scrollHeight
            ) {
                // 重置table距离顶部距离
                divData.scrollTop = 0;
            }
        }, 100);
    }
    start();
}
onMounted(() => {
    infinitScroll("table1");
    // infinitScroll("table2");
    // infinitScroll("table3");
})
</script>
<style scoped lang="scss">
.left {
    /* width: 500px; */
    height: 100%;
    // min-width: 500px;
    // max-width: 800px;
    width: 100%;
    border: none !important;
}

.left_header {
    // min-width: 500px;
    // max-width: 800px;
    height: 28%;
    width: 100%;
    background-image: url("@/assets/img/right1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    z-index: 10000;
    padding-top: 1.625rem;
    overflow: hidden;
}

.title {
    width: 10rem;
    /* height: 34px; */
    line-height: 1.5rem;
    /* text-align: center; */
    padding: 0.2rem 0 0.2rem 1.3125rem;
    /* background: #ccc; */
    font-size: 1.25rem;
    position: relative;
    margin-left: 1.5625rem;
    background: linear-gradient(to right,
            rgba(2, 173, 245, 0.6),
            rgba(2, 173, 245, 0.1));
}

.title::before {
    content: "";
    width: 0.3125rem;
    height: 1.9rem;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(2, 173, 245);
}

.title_table {
    margin-left: 1.5625rem;
    font-size: 0.875rem;
    width: 30rem;
}

::v-deep .el-table thead {
    color: rgb(51, 155, 200);
}

// ::v-deep .left_header {
//   .el-table__body-wrapper {
//     background-color: #fff;
//   }
// }
// 中间的
.left_middle {
    margin-top: 1.25rem;
    margin-left: 1.35rem;
    min-width: 500px;
    // max-width: 800px;
    width: 100%;
    height: 28%;
    background-image: url("@/assets/img/right2.png");
    background-repeat: no-repeat;
    background-size: 91% 100%;
    color: white;
    z-index: 10000;
    padding-top: 1.625rem;
    overflow: hidden;
}

// 下面的
.left_bottom {
    margin-top: 1.25rem;
    margin-left: 1.35rem;
    // min-width: 500px;
    // max-width: 800px;
    // width: 100%;
    height: 36%;
    background-image: url("@/assets/img/right3.png");
    background-repeat: no-repeat;
    background-size: 100% 85%;
    color: white;
    z-index: 10000;
    padding-top: 1.625rem;
    overflow: hidden;
}

// 表格
::v-deep.el-table,
.el-table__expanded-cell {
    background: rgba(0, 133, 255, 0);
    color: #fff;
    font-size: 0.875rem;
}

::v-deep .el-table_5_column_5 {
    background: transparent;
}

::v-deep .el-table__row {
    background: transparent;
}

.el-table {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    ::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    border-bottom: none !important;

    ::v-deep tbody tr:hover>td {
        background-color: rgba(16, 48, 78, 0) !important;
    }

    ::v-deep thead tr,
    ::v-deep thead .el-table__cell {
        background-color: transparent;
        color: #fff;
    }

    ::v-deep .el-button--text {
        color: rgb(8, 216, 249);
    }
}

::v-deep.el-table tr {
    background: transparent;
}

::v-deep .el-table_2_column_4 {
    background: transparent;
}

.el-table th.el-table__cell {
    background-color: transparent;
}

::v-deep .btn-prev,
::v-deep .btn-next {
    background: transparent !important;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none !important;
}

::v-deep .has-gutter .el-table td.el-table__cell,
::v-deep .has-gutter .el-table th.el-table__cell.is-leaf {
    border-bottom: none !important;
}
::v-deep .el-table__inner-wrapper:before{
  background-color: transparent !important;
}
::v-deep .el-table__column-resize-proxy {
    border-left: none;
}

::v-deep .el-table::before {
    background-color: transparent;
}

::v-deep .el-table .el-table__cell {
    padding: 0.5rem 0;
}

// 修改rem布局

::v-deep el-table {}

::v-deep .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 1.4375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
</style>